<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arc</title>

<script>
window.onload = function(){
	canvas = document.getElementById('mycanvas');
	ctx = canvas.getContext('2d');
	
// 	ctx.strokeStyle='#ff0000';
// 	ctx.beginPath();
// 	ctx.fillStyle='#aaaaff';
// 	ctx.beginPath();
// 	ctx.arc( 100, 100, 50, 0, Math.PI*2, true);
// 	ctx.closePath();
// 	ctx.stroke();
//<팩맨>
// 	ctx.strokeStyle='#0000ff';
// 	ctx.lineWidth='5';
// 	ctx.fillStyle='#aaaaff';
// 	ctx.beginPath();
// 	ctx.moveTo(200,200);
// 	ctx.arc( 200, 200, 180, Math.PI*1.9, Math.PI*0.1, true);
	
// 	ctx.fill();
// 	ctx.closePath();
// 	ctx.stroke();
	
// 	ctx.strokeStyle='#000000';
// 	ctx.fillStyle='#ffffff';
// 	ctx.beginPath();
// 	ctx.arc( 200, 100, 30, 0, Math.PI*2, true);
// 	ctx.fill();
// 	ctx.closePath();
// 	ctx.stroke();
ctx.strokeStyle='#0000ff';
ctx.lineTo(10,140);
ctx.lineTo(300,140);
ctx.moveTo(30,180);
ctx.lineTo(30,5);
ctx.stroke();

ctx.lineWidth='2';
ctx.fillStyle='#ff0000';
ctx.fillRect(30,20,50,120);
ctx.strokeRect(30,20,50,120);
ctx.fillRect(80,70,50,70);
ctx.strokeRect(80,70,50,70);
ctx.fillRect(130,40,50,100);
ctx.strokeRect(130,40,50,100);
ctx.fillRect(180,70,50,70);
ctx.strokeRect(180,70,50,70);
// ctx.fill();	
ctx.strokeStyle='#0000ff';

ctx.strokeStyle='#0000ff';
ctx.moveTo(10,300);
ctx.lineTo(200,300);

ctx.moveTo(10,300);
ctx.lineTo(40,220);
ctx.lineTo(80,260);
ctx.lineTo(120,200);
ctx.lineTo(140,240);
ctx.lineTo(150,230);

ctx.moveTo(10,200);
ctx.lineTo(10,300);
ctx.stroke();


	
	
// 	ctx.strokeStyle='#000000';
// 	ctx.lineWidth='4';
// 	ctx.fillStyle='#aaaaff';
// 	ctx.beginPath();
// 	ctx.moveTo(300,300);
// 	ctx.arc( 300, 300, 50, 0, Math.PI*1.2, true);
// 	ctx.closePath();
// 	ctx.fill();
// 	ctx.stroke();
}
</script>

</head>
<body>
	
	
	<canvas id= 'mycanvas' width='600px' height='500px'></canvas>
</body>
</html>